<template>
	<view class="l-dragSort" :style="{height:initListPosition[0].height * listArray.length + 'px'}"
		@touchmove.stop.prevent>
		<view class="listItem uni-bg-color-fff radius-10 px-30 horizontal_view align_item_center justify_between"
			@click.stop="onChangeItem(item)" @longpress="onTouchstart($event, index)" @touchmove="onTouchmove"
			@touchend="onTouchend" v-for="(item,index) in listArray" :key="index" :style="{'height':lineHeight + 'rpx',
						'top': listPosition[index].top + 'px',
						'transition': curretnItemIndex === index ? 'initial' : '.3s'}"
			:class="{'activeClass':index == curretnItemIndex}">
			<view class="">
				{{item.name}}
			</view>
			<view class="" @click.stop="onDelete(item)">
				<u-button icon="trash" icon-color="#d81e06" shape="circle" :customStyle="{
					width:'40px',
					height:'40px'
				}"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CateDragSort",
		props: {
			//列表
			list: {
				type: Array,
				default: []
			},
			// 列表每行高度
			lineHeight: {
				type: Number,
				default: 120
			}
		},
		data() {
			return {
				listArray: [],
				// 所有元素定位位置
				listPosition: [],
				// 记录拖动前元素定位位置
				initListPosition: [],
				// 记录当前拖动元素的下标
				curretnItemIndex: -1,
				// 记录拖动前的位置
				recordPosition: {
					y: 0
				},
				// 记录拖动前的定位位置
				recordCurrentPositionItem: {
					top: 0
				},
				// 是否正在交换位置
				isChange: false
			}
		},
		watch: {
			'list': {
				handler(data) {
					this.listArray = [...data]
				},
				deep: true,
			}
		},
		created() {
			this.init()
			this.listArray = [...this.list]
		},
		methods: {
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.listItem').fields({
					rect: true,
					size: true
				}, data => {
					data.forEach((item, index) => {
						this.listPosition.push({
							height: item.height,
							top: (item.height * index) + 10,
						});
					});
					this.initListPosition = [...this.listPosition]
				});
				query.exec(); //执行所有请求
			},
			onTouchstart(event, index) {
				const {
					pageY
				} = event.touches[0];

				// 记录当前拖动元素的下标
				this.curretnItemIndex = index;
				// 记录拖动前的位置
				this.recordPosition = {
					y: pageY
				};
				// 记录拖动前的定位位置
				this.recordCurrentPositionItem = this.listPosition[index];
			},
			onTouchmove(event) {
				const {
					pageY
				} = event.touches[0];

				// 获取移动的差
				this.$set(this.listPosition, this.curretnItemIndex, {
					top: this.listPosition[this.curretnItemIndex].top + (pageY - this.recordPosition
						.y),
				});
				// 记录位置
				this.recordPosition = {
					y: pageY
				};
				// 向下
				if (this.listPosition[this.curretnItemIndex].top >= this.listPosition[this.curretnItemIndex + 1]?.top -
					this.initListPosition[0].height / 2) {
					if (this.isChange) return
					this.isChange = true
					let temp = this.listArray[this.curretnItemIndex]
					this.listArray[this.curretnItemIndex] = this.listArray[this.curretnItemIndex + 1]
					this.listArray[this.curretnItemIndex + 1] = temp
					this.listPosition[this.curretnItemIndex + 1] = this.listPosition[this.curretnItemIndex]
					this.listPosition[this.curretnItemIndex] = this.recordCurrentPositionItem
					this.curretnItemIndex = this.curretnItemIndex + 1
					this.recordCurrentPositionItem = this.initListPosition[this.curretnItemIndex]
					this.isChange = false
				}
				// 向上
				if (this.listPosition[this.curretnItemIndex].top <= this.listPosition[this.curretnItemIndex - 1]?.top +
					this.initListPosition[0].height / 2) {
					if (this.isChange) return
					this.isChange = true
					let temp = this.listArray[this.curretnItemIndex]
					this.listArray[this.curretnItemIndex] = this.listArray[this.curretnItemIndex - 1]
					this.listArray[this.curretnItemIndex - 1] = temp
					this.listPosition[this.curretnItemIndex - 1] = this.listPosition[this.curretnItemIndex]
					this.listPosition[this.curretnItemIndex] = this.recordCurrentPositionItem
					this.curretnItemIndex = this.curretnItemIndex - 1
					this.recordCurrentPositionItem = this.initListPosition[this.curretnItemIndex]
					this.isChange = false
				}
			},

			onTouchend(event) {
				// 拖动元素归位
				this.listPosition[this.curretnItemIndex] = this.initListPosition[this
					.curretnItemIndex];
				this.curretnItemIndex = -1;
				this.$emit('change', [...this.listArray])
			},
			onDelete(item) {
				this.$emit("onDelete", item)
			},
			onChangeItem(item) {
				this.$emit("onChangeItem", item)
			},
		}
	}
</script>

<style scoped lang="scss">
	.l-dragSort {
		width: 100%;
		position: relative;

		.listItem {
			width: 100%;
			position: absolute;
			border-bottom: 20rpx solid #f3f3f3;
		}

		.activeClass {
			box-shadow: 0 0px 50rpx #cfcfcf;
			z-index: 999;
			border-bottom: 0rpx solid #fff;
		}
	}
</style>